import { ref } from 'vue'

export default function () {
  const visible = ref(false)
  const data = ref({})
  const position = ref({})

  function show(e) {
    data.value = e.item.getModel()
    const keyShape = e.item.getKeyShape()
    const { x, y, width } = keyShape.getCanvasBBox()
    position.value = {
      left: x + width + 5 + 'px',
      top: y + 'px',
    }

    visible.value = true
  }
  function hide(e) {
    visible.value = false
  }

  function mouseenter() {
    visible.value = true
  }
  function mouseleave() {
    visible.value = false
  }

  return {
    visible,
    data,
    position,
    show,
    hide,
    mouseenter,
    mouseleave,
  }
}
